<template>
  <div style="margin: 0px 48px; margin-bottom: 48px">
    <div class="jieduanbox1">
      <div class="jdbox1Left" style="height: 316px; position: relative">
        <div>
          <span class="titStyle">平均评定水平值</span>
        </div>
        <div ref="jdtopsangji" class="qushibianhua" style="height: 400px"></div>
        <div class="pdtime">评定周期：2020-02-12至2021-12-24</div>
      </div>
    </div>
    <div class="jieduanbox1" style="margin-top: 24px">
      <div class="jdbox1Cont" style="margin: 0px">
        <div>
          <span class="titStyle">排序与趋势分析</span>
        </div>
        <div ref="jdchengjiBox" class="qushibianhua"></div>
      </div>
      <div class="jdbox1Right" v-show="activeName == 1">
        <div
          ref="jdkoufenBox"
          style="margin-top: 46px"
          class="qushibianhua"
        ></div>
      </div>
      <div class="jdbox1Right" v-show="activeName == 2">
        <div
          ref="jdkoufenBoxleida"
          style="margin-top: 46px"
          class="qushibianhua"
        ></div>
      </div>
    </div>
    <div class="jieduanbox1" style="margin-top: 24px">
      <div class="jdbox1Cont" style="margin-left: 0px">
        <div>
          <span class="titStyle">下级单位共有问题分析</span>
        </div>
        <div class="wtfenxi">
          <div ref="wtfenxiLeft" class="wtfenxiLeft"></div>
          <div class="wtfenxiRight">
            <div>分析说明</div>
            <div class="wtfenxiRightcont" v-html="dataText"></div>
          </div>
        </div>
      </div>
      <div class="jdbox1Right">
        <div>
          <span class="titStyle">较突出问题分析</span>
        </div>
        <div>
          <div ref="zbpaiming" class="qushibianhua"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataText:
        "1.b</br>2.cs</br>3.cb</br>4.cb</br>5.cb</br>6.cb</br>7.cb</br>8.cb</br>9.cb</br>10.cb</br>11.cb</br>12.cb</br>13.cb</br>14.cb</br>15.cb</br>16.cb</br>17.cb</br>18.cb</br>19.cb</br>20.cb</br>21.cb</br>22.cb</br>23.cb</br>",
    };
  },
  props: {
    activeName: {
      type: String,
    },
  },
  components: {},
  mounted() {},
  watch: {},
  methods: {
    yibiaopan() {
      let myChart = this.$echarts.init(this.$refs.jdtopsangji);
      myChart.setOption({
        series: [
          {
            radius: "98%",
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 12,
                roundCap: true,
                color: [
                  [0.25, "#F69D82"],
                  [0.5, "#FFD600"],
                  [0.75, "#59BA89"],
                  [1, "#01575C"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 10,
              offsetCenter: [0, "-60%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 5,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 10,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            axisLabel: {
              color: "#708189",
              fontSize: 12,
              distance: -40,
              formatter: function (value) {
                if (value === 0.875) {
                  return "优";
                } else if (value === 0.625) {
                  return "良";
                } else if (value === 0.375) {
                  return "中";
                } else if (value === 0.125) {
                  return "差";
                }
                return "";
              },
            },
            title: {
              offsetCenter: [0, "-40%"],
              fontSize: 14,
            },
            detail: {
              fontSize: 40,
              offsetCenter: [0, "-15%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "分";
              },
              color: "auto",
            },
            data: [
              {
                value: 0.7,
                name: "正在评定中...",
              },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    jdchengji() {
      let myChart = this.$echarts.init(this.$refs.jdchengjiBox);
      myChart.setOption({
        color: [
          "#277074",
          "#58BA89",
          "#7CD9AA",
          "#B7D88B",
          "#A1C94A",
          "#7DA22D",
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          left: 10,
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "建制营1",
              "建制营2",
              "建制营3",
              "建制营4",
              "建制营5",
              "建制营6",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: false,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "训练计划制定",
            type: "bar",
            stack: "Ad",
            data: [120, 132, 101, 134, 90, 230],
            barWidth: "16",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 10, 10],
              },
            },
          },
          {
            name: "训练条件建设",
            type: "bar",
            stack: "Ad",
            data: [220, 182, 191, 234, 290, 330],
          },
          {
            name: "训练监察奖惩",
            type: "bar",
            stack: "Ad",
            data: [150, 232, 201, 154, 190, 330],
            barWidth: "16",
          },
          {
            name: "训练考核",
            type: "bar",
            stack: "Ad",
            data: [150, 232, 201, 154, 190, 330],
            barWidth: "16",
          },
          {
            name: "训练计划落实",
            type: "bar",
            stack: "Ad",
            data: [150, 232, 201, 154, 190, 330],
            barWidth: "16",
          },
          {
            name: "人员素质",
            type: "bar",
            stack: "Ad",
            data: [150, 232, 201, 154, 190, 330],
            barWidth: "16",
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
              },
            },
          },
        ],
      });
      window.onresize = myChart.resize;
      myChart.on("click", function (params) {
        console.log("点击了柱子", params);
      });
    },
    jdkoufen() {
      let myChart = this.$echarts.init(this.$refs.jdkoufenBox);
      myChart.setOption({
        color: ["#277074", "#59BA89", "#A1C94A", "#E1F396", "#6780DC"],
        legend: {
          left: 10,
          itemHeight: 10, // 设置高度
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            boundaryGap: false,
            data: [
              "第1周",
              "第2周",
              "第3周",
              "第4周",
              "第5周",
              "第6周",
              "第7周",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "建制营1",
            type: "line",
            smooth: true,
            data: [420, 332, 301, 334, 350, 370, 370],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
          },
          {
            name: "建制营2",
            type: "line",
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
          },
          {
            name: "建制营3",
            type: "line",
            smooth: true,
            data: [22, 18, 19, 23, 29, 33, 31],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
          },
          {
            name: "建制营4",
            type: "line",
            smooth: true,
            data: [20, 82, 91, 34, 90, 30, 10],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    leidaqushi() {
      let myChart = this.$echarts.init(this.$refs.jdkoufenBoxleida);
      myChart.setOption({
        legend: {
          left: 10,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "4%",
          top: "5%",
          containLabel: true,
        },
        color: ["#59BA89", "#277074", "#F69D82"],
        radar: {
          triggerEvent: true,
          // shape: 'circle',
          // axisLabel: { show: true },  刻度线上得值是否展示
          radius: 80,
          nameGap: 4,
          indicator: [
            { name: "情报侦察", max: 6500 },
            { name: "火力突击", max: 38000 },
            { name: "对抗防护", max: 52000 },
            { name: "XXXX", max: 16000 },
            { name: "XXXX", max: 30000 },
            { name: "指挥控制", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [5000, 26000, 42000, 14000, 28000, 21000],
                name: "本次考试",
                areaStyle: {},
                symbol: "none",
              },
              {
                value: [1000, 6000, 2000, 12000, 8000, 1000],
                name: "平均值",
                areaStyle: {},
                symbol: "none",
              },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    wtfenxiLeft() {
      let myChart = this.$echarts.init(this.$refs.wtfenxiLeft);
      myChart.setOption({
        color: ["#277074"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        grid: {
          left: "8%",
          right: "8%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
            data: [
              "指标1(阶段性)",
              "指标2(阶段性)",
              "指标3(阶段性)",
              "指标4(阶段性)",
              "指标5(阶段性)",
              "指标6(阶段性)",
              "指标7(阶段性)",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            // y轴不显示数值
            axisLabel: {
              formatter: function () {
                return "";
              },
            },
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "16",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
              },
            },
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    zbpaiming() {
      let myChart = this.$echarts.init(this.$refs.zbpaiming);
      let list = ["一营", "四营", "六营", "二营"];
      myChart.setOption({
        color: ["#277074"],
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          top: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: function (value) {
            return value.max;
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisTick: {
            //刻度线
            show: false,
          },
          axisLine: {
            //坐标轴
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "指标1（阶段性）",
            "指标2（阶段性）",
            "指标4（过程性）",
            "指标5（过程性）",
          ],
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //坐标轴
            show: false,
          },
        },
        series: [
          {
            name: "2011",
            type: "bar",
            barWidth: 12,
            data: [18203, 23489, 29034, 104970],
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0],
              },
            },
            label: {
              normal: {
                show: true,
                fontSize: 14,
                color: "#128075",
                position: "right",
                // 自定义顶部文字写判断
                formatter: function (val) {
                  console.log("数据啊啊啊", val);
                  return list[val.dataIndex];
                },
              },
            },
          },
        ],
      });
      window.onresize = myChart.resize;
    },
  },
};
</script>

<style  scoped>
@import "./css/index.css";
</style>

